<template>
<div class="home">
    <div class="nav-bar">
       <div class="left"><slot name="left"> </slot></div>
       <div class="center"><slot name="center"> </slot></div>
       <div class="right"><slot name="right"> </slot></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'NavBar',
}
</script>
<style>
  .home {
    padding-top: 44px;
  }
    .nav-bar{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        display: flex; 
        line-height: 44px ;
        height: 44px;
        text-align: center;
        background-color: pink;
        color: #fff;
    }
    .left,.right {
        width: 60px;
        /* background-color: pink; */
    }
    .center {
        flex: 1;
        /* background-color: blue; */
    }
</style>
